/**
 * 错误边界处理
 * */

import { Component } from 'react';
import { Card, Result, Typography } from 'antd';
import styles from './styles.less';
import ScrollBarLayout from '@/components/ScrollBarLayout';

import { CloseCircleOutlined } from '@ant-design/icons';

const { Paragraph } = Typography;

class Index extends Component<ErrorAPI.IPropsType, ErrorAPI.IStateType> {
  state = {
    error: false,
    errorInfo: null,
  };

  componentDidCatch(error: any, errorInfo: any) {
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.errorInfo) {
      return (
        <div className={styles['error-layout']}>
          <Card style={{ height: '100%' }}>
            <ScrollBarLayout>
              <Result
                title={'页面错误'}
                subTitle={this.state.error && this.state.error.toString()}
                status={'error'}
              >
                <Paragraph>
                  <CloseCircleOutlined className="site-result-demo-error-icon" />
                  {this.state.errorInfo}
                </Paragraph>
              </Result>
            </ScrollBarLayout>
          </Card>
        </div>
      );
    }

    return (
      <div className={styles['success-layout']}>{this.props.children}</div>
    );
  }
}

export default Index;
